<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="24">
                <el-col :span="5">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">开始时间</div>
                        <el-date-picker style="width: 100%;"
                            v-model="startTime"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="开始时间">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">结束时间</div>
                        <el-date-picker style="width: 100%;"
                            v-model="endTime"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">操作类型</div>
                        <el-select v-model="type" class="el-cascader-margin w-100p" placeholder="请选择操作类型">
                            <el-option
                            v-for="item in types"
                            :key="item.key"
                            :label="item.text"
                            size="medium"
                            :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="7">
                  <div style="position:relative">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                      <div class="el-input-group__prepend" tabindex="-1">直配门店</div>
                      <el-input placeholder="请选择直配门店" v-model="branchName" auto-complete="off" :maxlength="5" size="medium" >
                        <el-button slot="append" icon="el-icon-caret-bottom" @click="goChose()"></el-button>
                      </el-input>
                    </div>
                    <div  v-if="isDistricts" style="position: absolute;z-index:999999;background-color: #fff;width:100%;max-height: 30vh;overflow-y: auto;">
                      <div style="text-align:left">
                        <el-tree
                          class="filter-tree"
                          id="myPanel"
                          :data="treeData"
                          node-key="id"
                          ref="tree"
                          :default-checked-keys="checkedKey"
                          default-expand-all
                          :props="defaultProps" @node-click="clickNode">
                        </el-tree>
                      </div>
                    </div>
                  </div>

                </el-col>
            </el-row>
            <el-row style="margin-top:20px;margin-bottom:20px" :gutter="24">
                <el-col :span="5">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">选择卡号</div>
                        <el-select v-model="memberCard" class="el-cascader-margin w-100p" placeholder="请选择卡号">
                            <el-option
                            v-for="item in memberCards"
                            :key="item.no"
                            :label="item.no"
                            size="medium"
                            :value="item.no">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div  class="text-left">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                        <!--<el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">导出</el-button>-->
                    </div>
                </el-col>
            </el-row>
             <el-row :gutter="20">
                <el-col :span="24">
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="日期">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.createAt">{{scope.row.createAt}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作类型">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.type">{{scope.row.type.text}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="卡号">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.cardNo">{{scope.row.cardNo}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="卡类型">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.cardType">{{scope.row.cardType}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="主账户余额">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.afterValue">{{scope.row.afterValue}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="赠送账户余额">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.afterGift">{{scope.row.afterGift}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="变动积分 ">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.beforPoint">{{scope.row.beforPoint-scope.row.afterPoint}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="剩余积分 ">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.afterPoint">{{scope.row.afterPoint}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="发生门店 ">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.branchName">{{scope.row.branchName}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作人">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.operatorName">{{scope.row.operatorName}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="关联账单">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.orderNo">{{scope.row.orderNo}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                </el-table>
                </el-col>
            </el-row>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
//注意路径
export default {
  data() {
    return {
      id:'',
      branchName:'',
      startTime:'',
      endTime:'',
      memberCard:'',
      type:'',
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      loading: false,
      tableData: [],
      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      currentPage: 1,
      activityId: "",
      districts:[],
      types:[],
      memberCards:[],
      checkedKey:[],//默认选中的值,
      isDistricts:false

    };
  },
  created() {
    window.this = this;
    if(this.$route.query.id){
      this.id = this.$route.query.id;
      this.initData();
    }
  },
  methods: {
    clickNode(data,node,val){
      if(!data.iBranch){
        return;
      }
      this.branchName = data.label;
      this.isDistricts=false;

    },
    goChose(){
      this.isDistricts=!this.isDistricts;
    },
    initData() {
      this.currentPage = 1;
      this.getData();
    },
    keyDown(ev) {
      if (ev.keyCode == 13) {
        this.currentPage = 1;
        this.getData();
      }
    },
    cleanSearch() {
      this.currentPage = 1;
      this.startTime='';
      this.endTime='';
      this.branchName="";
      this.memberCard = "";
      this.type="";
      this.getData();
    },
    search() {
      this.currentPage = 1;
      this.getData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    getData() {

      var se = "";
      if(this.startTime){
        se += "&search.createAt_gte="+this.startTime+ " 00:00:00";
      }
      if(this.endTime){
        se += "&search.createAt_lte="+this.endTime+" 23:59:59";
      }

      if(this.branchName){
        se += "&search.branchName_eq="+this.branchName;
      }
      if(this.type){
        se +="&search.type_eq="+this.type;
      }
      if(this.memberCard){
        se += "&search.cardNo_eq="+this.memberCard;
      }

      this.$axios
        .get("members/members/getVipRecord?id=" +this.id+"&page.pn="+this.currentPage+"&page.size="+this.pageSize+se)
        .then(data => {
          this.loading = false;
          this.tableData = data.content.recordPage.content;
          this.total = data.content.recordPage.totalElements;
          var tree = data.content.districts;
          this.newLabel(tree);
          this.treeData = tree;
          this.types = data.content.types;
          this.memberCards = data.content.memberCards;
        })
        .catch(function(err) {});
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          if (newList[i].children) {
            this.newLabel(newList[i].children)
          }
        }
      }
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    }
  }
};
</script>
<style scoped>
</style>
